<template>
  <div>
    <DeviceCardView
        v-if="currentMode === 'view'"
        :value="currentDevice"
        ref="deviceView"
    >
      <template #footer>
        <div class="device-card-footer">
          <el-button type="text" @click="handleDeleteDevice()">
            <el-icon class="el-icon-delete delete-icon"></el-icon>
          </el-button>
          <el-button type="text" @click="handleEdit()">
            <el-icon class="el-icon-edit"></el-icon>
          </el-button>
        </div>
      </template>
    </DeviceCardView>
    <EditDeviceCard
        v-else
        @cancel="handleCancelEdit()"
        @error="$emit('error', $event)"
        @saved="handleSaved($event)"
        :init-device="currentDevice"
        :save-edit="handleSaveEdit">
    </EditDeviceCard>
  </div>
</template>

<script>
import DeviceCardView from "@/components/new/device-card/DeviceCardView";
import DeviceCardEdit from "@/components/new/device-card/DeviceCardEdit";
import IconFont from "@/components/new/iconfont/IconFont";
import {postUserDevice, deleteUserDevice} from "@/api/worker";
import EditDeviceCard from "@/components/new/device-card/EditDeviceCard";
export default {
  name: "MyDevice",
  components: {EditDeviceCard, IconFont, DeviceCardEdit, DeviceCardView},
  props: {
    initDevice: {
      default() {
        return {
          id: -1,
          name: '',
          os: '',
          ram: 1,
          processorArchitecture: ''
        }
      }
    },
    initMode: {
      default: 'view'
    }
  },
  data() {
    return {
      currentMode: this.initMode,
      currentDevice: {...this.initDevice},
      editDevice: {...this.initDevice},
      saving: false
    }
  },
  methods: {
    handleEdit(){
      this.currentMode = 'edit';
    },
    handleSaved(device){
      this.currentDevice = device;
      this.currentMode = 'view';
    },
    handleCancelEdit(){
      this.currentMode = 'view';
      this.$emit('cancel');
    },
    handleDeleteDevice(){
      this.$msgbox({
        title: '确定删除以下设备吗？',
        message: this.$createElement(DeviceCardView, { props: { value: this.currentDevice } }, null),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            deleteUserDevice(this.currentDevice.id)
            .then(res => {
              if(res.code !== 200){
                throw new Error(res.msg);
              }else{
                this.$emit('device-dropped');
              }
            }).catch(err => {
              this.$emit('error', err);
            }).finally(() => {
              instance.confirmButtonLoading = false;
              done();
            })
          } else {
            done();
          }
        }
      });
    },
    init(){
      this.currentDevice = {...this.initDevice};
      this.editDevice = {...this.initDevice};
    },
    handleSaveEdit(device){
      return postUserDevice(sessionStorage.getItem('userid'), device);
    },
  }
}
</script>

<style scoped>
.device-card-footer{
  display: flex;
  justify-content: space-between;
}
.delete-icon{
  color: red;
}
</style>
